var leftData = {
  title: "中国区设备分布",
  xAxis: ['北京', '广州', '上海', '江苏', '深圳'],
  data: [
    {
      title: "二碳箱",
      data: [780, 800, 900, 456, 500],
    },
    {
      title: "安全柜",
      data: [781, 801, 901, 457, 501],
    },

    {
      title: "低温冰箱",
      data: [100, 400, 200, 410, 320],
    },
    {
      title: "冷藏箱",
      data: [783, 803, 903, 459, 503],
    },
    {
      title: "液氮罐",
      data: [314, 150, 243, 301, 504],
    },
    {
      title: "摇床",
      data: [123, 210, 130, 241, 250],
    },
    {
      title: "IFA",
      data: [82, 60, 92, 85, 68],
    },
  ],
};

const color = ["#018cee", "#89a0e7", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"]

function lineCharts(id, chartdata) {
  const chartDom = document.getElementById(`${id}`);
  const myChart = echarts.init(chartDom);


  const series = chartdata.data.map(({ data, title }, index) => {
    return {
      type: "line",
      data,


      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 1
        }
      },
      itemStyle: {
        normal: {
          color: color[index],
          borderWidth: 6

        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: color[index]
        },
        {
          offset: 1,
          color: 'rgba(0,42,75,0.3)'
        }

        ], false),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      },
      data: data,
      smooth: true,
      name: title,
      stack: "a",
    }
  })

  const option = {
    color,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      height: "80%",
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: chartdata.xAxis,
        splitLine: {
          show: false,
        },
        axisLabel: {
          interval: 0, //代表显示所有x轴标签显示
          textStyle: { fontSize: 10, color: "#ccc" },
        }
      }
    ],

    yAxis: [
      {
        type: "value",
        splitLine: { lineStyle: { color: "#00345e" } },
        axisTick: {
          show: false,
          lineStyle: {
            color: '#00345e'
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          formatter: function(value) {
            return ` ${value / 1000}k`
          },
          textStyle: {
            fontSize: 12,
            color: "#ccc",

          },
        },
      },
    ],
    series

  };
  option && myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  // let faultByHourIndex = 0;

  // let timerFoo = function() {
  //   myChart.dispatchAction({
  //     type: 'showTip', // 根据 tooltip 的配置项显示提示框。
  //     seriesIndex: 0,
  //     dataIndex: faultByHourIndex
  //   });
  //   faultByHourIndex++;

  //   if (faultByHourIndex >= chartdata.xAxis.length) {
  //     faultByHourIndex = 0;
  //   }
  // }

  // var faultByHourTime = setInterval(timerFoo, 3000)

  // window.onunload = function() {
  //   clearInterval(faultByHourTime)
  // }

  // myChart.on('mouseover', function(params) {
  //   clearInterval(faultByHourTime)
  // });
  // myChart.on('mouseout', function(params) {
  //   console.log(params)
  //   faultByHourIndex = 0
  //   faultByHourTime = setInterval(timerFoo, 3000)
  // })
}
